<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入类库 -->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style>
			.show {
				display: block;
			}

			.hide {
				display: none;
			}
			
		
		</style>
	</head>
	<body>

		<!-- 视图 -->
		<div id="app">
			
			<input type="text" v-model="status">
			{{status=='show'}}
			
			<p  :class="status=='show'?show:'hide'">段落信息1 </p>	

		</div>



		<!-- 把 vuejs管理的数据跟 视图进行双向绑定-->
		<script>
			let vm = new Vue({
				el: "#app",
				data: {
					status: 'show',
				}
			})
		</script>



	</body>
</html>
